<template>
  <div class="msg" v-if="visible">
    message
    <button @click="close">close</button>
  </div>
</template>
<script>
export default {
  name: "CoolMsg",
};
</script>
<script setup>
import { onMounted, ref } from "vue";
const visible = ref(false);
onMounted(() => {
  visible.value = true;
});
function close() {
  visible.value = false;
}
defineExpose({
  visible,
  close,
});
</script>
<style lang="scss" scoped></style>
